<div class="competition-match" [class.cup-match]="pageDate.isCup && stateStore.showGroupFilter">
  <div class="match-shim-block" *ngIf="pageDate.isCup && stateStore.showGradeFilter"></div>
  <div class="default-shim-block" *ngIf="!(pageDate.isCup && stateStore.showGradeFilter)"></div>
  <div class="group-filter" (click)="selectGroup($event)"
       *ngIf="pageDate.isCup && stateStore.showGroupFilter">
    <p class="seed-flex-box seed-flexbox-align-center" [class.open-filter]="stateStore.openGroupFilter">
      {{dataStore.currentGroupName}}</p>
    <div class="filter-content">
      <ul [class.show]="stateStore.openGroupFilter">
        <li *ngFor="let groupName of dataStore.groupNameArr" [class.hide]="dataStore.currentGroupName === groupName"
            (click)="selectGroup($event)">
          {{groupName}}
        </li>
      </ul>
    </div>
  </div>
  <div class="container match-container seed-flex-box" [class.cup-match-container]="pageDate.isCup">
    <aside *ngIf="pageDate.isCup && stateStore.showGradeFilter">
      <ul class="group" *ngFor="let match of cupMatchs;let i=index;">
        <li (click)="sortCupScheduleByGrade(i)" [class.active]="i === dataStore.currentGradeIndex">
          第{{match.grade | chineseNumber}}轮
        </li>
      </ul>
    </aside>
    <div class="match-list" [class.deviation-left]="pageDate.isCup && stateStore.showGradeFilter">
      <app-match-card [matchs]=matchs [gradeArr]="dataStore.specialGradeArr"
                      *ngIf="stateStore.haveData"></app-match-card>
    </div>
  </div>
  <seed-default-graph [text]="'暂无赛程'" [url]="'noData'" *ngIf="!stateStore.haveData"></seed-default-graph>
</div>
